<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择站点：</span>
                <el-select v-model="sites_id" clearable placeholder="请选择站点">
                    <el-option v-for="item in siteArrs" :key="item.dc_id" :label="item.title" :value="item.dc_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">订单日期：</span>
                <el-date-picker v-model="area_time" type="date" value-format="YYYY-MM-DD" :disabled-date="disabledDate" placeholder="请选择日期" />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>
        <!-- 批量操作 -->
        <div class="table-mb">
            <el-button type="default" plain @click="clickPrint(2)">批量导出</el-button>
            <el-button type="default" plain @click="clickAll">一键导出</el-button>
        </div>
        <div class="table-head flexs">
            <div class="table-check">
                <el-checkbox v-model="allChecked" @change="changeAll" />
            </div>
            <div class="table-good table-head-base">商品信息</div>
            <div class="table-price table-head-base">合计价格</div>
            <div class="table-pay-type table-head-base">支付方式</div>
            <div class="table-buy-info table-head-base">买家信息</div>
            <!-- <div class="table-oper table-head-base">操作</div> -->
        </div>
        <!-- 内容 -->
        <div class="table-body">
            <div class="table-item" v-for="(item, index) in arr_data" :key="item.order_id">
                <div class="table-item-head flexs">
                    <div class="table-item__head-left">
                        <div class="table-check" style="margin-right: 12px">
                            <el-checkbox v-model="item.is_select" @change="changeOne" />
                        </div>
                        <p class="item-head__sn">订单编号：{{ item.order_sn }}</p>
                        <p class="item-head__text">下单时间：{{ item.created_at_label }}</p>
                        <p class="item-head__text">
                            订单状态：<span>{{ item.order_status_label }}</span>
                        </p>
                    </div>
                    <div class="table-item__head-right"></div>
                </div>
                <div class="table-item-cont">
                    <div class="table-good table-head-base item-cont__base">
                        <div class="table-sub">
                            <div class="table-lr" style="margin-bottom: 0px" v-for="sub in item.order.order_product" :key="sub.product_id">
                                <!-- <el-image
                                            class="table-lr__img"
                                            loading="lazy"
                                            :src="proxy.imgUrl + sub.product_img + '!img_400'"
                                            fit="cover"
                                            v-if="sub.product_img"
                                        /> -->
                                <div class="table-lr__right table-right-other">
                                    <p class="lr-user">
                                        {{ sub.product_name }}，
                                        <span>等级：{{ sub.level }}，数量：{{ sub.product_number }}{{ sub.unit }}，</span>
                                        <span><em>￥</em>{{ sub.product_price }}</span
                                        >，<span
                                            >状态：<em style="color: #4b93fa">{{ orderStatusLabel[sub.status].title }}</em></span
                                        >
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-price table-head-base item-cont__base">
                        <div class="table-sub">
                            <p class="table-sub__p-mb">订单总额：<em style="font-size: 13px">￥</em>{{ item.amount }}</p>
                            <p class="table-sub__p-mb">优惠金额：<em style="font-size: 13px">￥</em>{{ item.youhui_amount }}</p>
                        </div>
                    </div>
                    <div class="table-pay-type table-head-base item-cont__base">
                        <div class="table-sub">
                            <p class="table-sub__p-mb">实付金额：<em style="font-size: 13px">￥</em>{{ item.total_price }}</p>
                            <p class="table-sub__p-mb">支付方式：{{ item.pay_code }}</p>
                        </div>
                    </div>
                    <div class="table-buy-info table-head-base item-cont__base">
                        <div class="table-sub">
                            <div class="table-lr">
                                <el-image
                                    class="table-lr__img img-round"
                                    loading="lazy"
                                    :src="proxy.imgUrl + item.face + '!img_400'"
                                    fit="cover"
                                    v-if="item.face"
                                />
                                <div class="table-lr__right">
                                    <p class="lr-user">姓名：{{ item.contact }}</p>
                                    <p class="lr-user table-sub__p-mb">电话：{{ item.mobile }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="table-oper table-head-base">
                        <div class="table-sub table-sub-btn">
                            <el-button link type="primary" class="theme-btn" @click="clickPrint(1, item)">打印配货单</el-button>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getSite()
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

const orderStatusLabel = {
    2: {
        status: 2,
        title: "已退款",
    },
    "-1": {
        status: -1,
        title: "已取消",
    },
    0: {
        status: 0,
        title: "待支付",
    },
    1: {
        status: 1,
        title: "备货中(货架号待生成)",
    },
    2: {
        status: 2,
        title: "待质检",
    },
    3: {
        status: 3,
        title: "已质检",
    },
    4: {
        status: 4,
        title: "已入位(待员工打包)",
    },
    5: {
        status: 5,
        title: "已打包(待员工发货)",
    },
    6: {
        status: 6,
        title: "平台待发货",
    },
    7: {
        status: 6,
        title: "平台已发货",
    },
    8: {
        status: 8,
        title: "已完成",
    },
}
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        order_sn: order_sn.value,
        uid: user_id.value,
        supplier_id: supplier_id.value,
        dc_id: sites_id.value,
        day: area_time.value,
    }
    getdata("storage/order/peiList", params)
}

// 搜索
const order_sn = ref("")
const area_time = ref("")
const user_id = ref("")
const supplier_id = ref("")
const sites_id = ref("")
const handleSearch = () => {
    search_btn.value = true
    allChecked.value = false
    pubRefreshParams(getList)
}

/**
 * 表格操作
 * @param {Boolean} allChecked 全/反选值
 * @param {Array} ids 选中的值
 * @param {Function} changeAll 全/反选事件
 */
const allChecked = ref(false)
const ids = ref([])
const changeAll = (val) => {
    let arrs = []
    arr_data.value.map((item) => {
        item.is_select = val
        val && arrs.push(item.order_id)
    })
    ids.value = arrs
}
// 单选
const changeOne = () => {
    let flag = true,
        arrs = []
    for (let i = 0; i < arr_data.value.length; i++) {
        if (!arr_data.value[i].is_select) {
            flag = false
        } else {
            arrs.push(arr_data.value[i].order_id)
        }
    }
    allChecked.value = flag
    ids.value = arrs
}

// 批量导出配货单，1是单个打印，2是批量
const clickPrint = (type, row) => {
    if (type == 2 && ids.value.length == 0) {
        proxy.$message({ message: "请选择批量导出的订单", type: "warning" })
        return
    }
    proxy.$axios
        .get("storage/order/batchPeiExport", {
            params: {
                order_ids: ids.value,
                supplier_id: supplier_id.value,
                dc_id: sites_id.value,
            },
            responseType: "blob",
        })
        .then((res) => {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}

// 打印全部配货单
const clickAll = () => {
    proxy.$axios
        .get("storage/order/allPeiExport", {
            params: {
                order_sn: order_sn.value,
                uid: user_id.value,
                supplier_id: supplier_id.value,
                dc_id: sites_id.value,
                day: area_time.value,
            },
            responseType: "blob",
        })
        .then((res) => {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}

// 站点信息
const siteArrs = ref([])
function getSite() {
    proxy.$axios
        .get("operation/dc")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                siteArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const disabledDate = (time) => {
    return time.getTime() > Date.now()
}
</script>
<script>
export default {
    name: "OrderPrintGoods",
}
</script>

<style lang="less" scoped>
:deep(.table-lr__img) {
    width: 40px !important;
    height: 40px !important;
}
:deep(.table-lr__right) {
    min-height: 40px !important;
}
.table-right-other {
    min-height: 20px !important;
}
.table-sub__p-mb {
    margin-bottom: 2px;
}
.table-head {
    background-color: #f5f7fa;
    width: 100%;
    height: 50px;
    border-radius: @radius-sm;
    border: 1px solid #ebeef5;
    overflow: hidden;
    margin-bottom: @margin-sm;
    padding: 0px @padding-md;
}

.table-body {
    margin-bottom: @margin-xl;
    .table-item {
        border: 1px solid #ebeef5;
        margin-bottom: @margin-sm;
        .table-item-head {
            background-color: #f5f7fa;
            width: 100%;
            height: 46px;
            overflow: hidden;
            padding: 0px @padding-md;
            border-bottom: 1px solid #ebeef5;
            .table-item__head-left {
                display: flex;
                align-items: center;
                .item-head__sn {
                    font-size: @font-size-md;
                    font-weight: bold;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                }
                .item-head__text {
                    font-size: @font-size-md;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                    span {
                        color: @themes;
                    }
                }
            }
        }
        .table-item-cont {
            display: flex;
            & > div {
                padding: @padding-md @padding-xs;
                font-weight: 500;
                text-align: left;
                &:last-child {
                    text-align: left;
                    .el-button {
                        margin: 0 @margin-sm @margin-xs 0;
                    }
                }
            }
            .table-sub {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .table-sub-btn {
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
            }
            .table-good {
                padding-left: @padding-md;
                padding-right: @padding-md;
                text-align: left;
            }
            .table-lr {
                margin-bottom: @margin-xs;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .item-cont__base {
                border-right: 1px solid #ebeef5;
            }
        }
    }
}

.table-check {
    flex: none;
    margin-right: @margin-base;
}

.table-good {
    flex: 1;
}

.table-price {
    width: 16%;
    flex: none;
    text-align: left;
}
.table-pay-type {
    width: 20%;
    flex: none;
    text-align: left;
}
.table-buy-info {
    width: 20%;
    flex: none;
    text-align: left;
}
// .table-oper {
//     width: 16%;
//     flex: none;
// }
.table-head-base {
    font-size: @font-size-md;
    font-weight: 700;
    color: @gray-8;
    padding: 0px @margin-xs;
}
:deep(.el-checkbox__inner) {
    width: 16px;
    height: 16px;

    &::after {
        width: 3px;
        height: 7px;
        left: 5px;
        top: 2px;
    }
}
</style>
